<template>
    <fieldset>
        <legend>常用api</legend>
        <h1 id="hh" ref="hh">{{ msg }}</h1>
        <input type="text" ref="ipt">
        <button @click="handleClick">点击</button>
        <child ref='child'/>
    </fieldset>
</template>
<script>
// ref 

//1.作用在dom节点上,能够获取真实dom的引用

//2.作用在子组件上,获取子组件实例的引用
import child from "./child.vue"

export default {
    data() {
        return {
            msg: '丨'
        }
    },
    components: {
        child
    },
    mounted() {
        //获取根实例
        console.log(this.$root)
        //获取父组件实例,这也可以成为父传子的一种方式,可以链式调用,一直到顶层root实例
        console.log(this.$parent.$parent.$parent.$parent)

        // $nextTick 下一个循环

        // 在dom更新之后,回调nextTick,可以用于获取数据更新之后的dom
    },
    methods: {
        // $nextTick 会依次使用MutationObserver Promise setImmediate setTimeout来执行延迟回调获取更新后的dom
        handleClick() {
            console.log(document.getElementById("hh").innerText)
            this.msg = 's'

            //mutation.observer

            // this.$nextTick(() => {
            //     console.log(document.getElementById("hh").innerText)
            // })
            // Promise.resolve()
            //     .then(() => {
            //         console.log(document.getElementById("hh").innerText)
            //     })

            // setImmediate(() => {
            //     console.log(document.getElementById("hh").innerText)
            // })

            // setTimeout(()=>{
            //     console.log(document.getElementById("hh").innerText)
            // })

            //获取引用
            // this.$refs

            this.$refs.ipt.focus()
            console.log(this.$refs)
            // this.$refs.child.msg = '野猪佩奇'
            this.$refs.child.change()
        }
    }
}
</script>